<template>
  <div>
    <el-button @click="getExcel">excel下载</el-button>
    <el-button @click="getExcel2">多sheet下载</el-button>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import { export_json_to_excel } from '@/utils/Export2Excel'
export default {
  data() {
    return {

    }
  },
  methods: {
    getExcel2() {
      console.log("导出多个sheet到同一个excel");
      let sheet1data = [{ department: "行政部", count: 2 }, { department: "前端部", count: 2 }];
      let sheet2data = [{ name: "张三", do: "整理文件" }, { name: "李四", do: "打印" }];
      let sheet3data = [{ name: "张大人", do: "vue" }, { name: "李大人", do: "react" }];
      var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
      var sheet2 = XLSX.utils.json_to_sheet(sheet2data);
      var sheet3 = XLSX.utils.json_to_sheet(sheet3data);

      /* create a new blank workbook */
      var wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, sheet1, "部门统计");
      XLSX.utils.book_append_sheet(wb, sheet2, "行政部");
      XLSX.utils.book_append_sheet(wb, sheet3, "前端部");
      const workbookBlob = this.workbook2blob(wb);
      // 点击下载
      this.openDownloadDialog(workbookBlob, `部门统计.xlsx`);
      // document.querySelector('#export').onclick = function () { this.openDownloadDialog(workbookBlob, `部门统计.xlsx`); }
    },
    // 将workbook装化成blob对象
    workbook2blob(workbook) {
      // 生成excel的配置项
      var wopts = {
        // 要生成的文件类型
        bookType: "xlsx",
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: "binary"
      };
      var wbout = XLSX.write(workbook, wopts);
      // 将字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
      });
      return blob;
    },

    // 将blob对象创建bloburl，然后用a标签实现弹出下载框
    openDownloadDialog(blob, fileName) {
      if (typeof blob == "object" && blob instanceof Blob) {
        blob = URL.createObjectURL(blob); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = blob;
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
      aLink.download = fileName || "";
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      //   移动端
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      }
      aLink.dispatchEvent(event);
    },
    getExcel() {
      console.log("测试excel导出");
      // import('@/common/utils/Export2Excel').then(excel => {
      //   const tHeader = ['机构号', '预约日期', '预约ID', '预约业务编码', '预约人手机号', '预约人微信号', '预约登记日期', '预约登记时间', '预约起始时间', '预约结束时间', '预约状态', '请求渠道', '证件号码', '证件类型', '卡号', '激活时间', '序列号', '队列号']
      //   const filterVal = ['Brno', 'ReserveDate', 'ReserveID', 'ReserveBsID', 'ReserveTelNo', 'ReserveWechat', 'ReserveRgstDate', 'ReserveRgstTime', 'ReserveStartTime', 'ReserveEndTime', 'ReserveStatus', 'ReqChannel', 'IDCode', 'IDType', 'AcNum', 'QueueActTime', 'ReserveSerNo', 'QueueNo']
      //   const list = this.list1
      //   const data = this.formatJson(filterVal, list)
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: this.filename,
      //     autoWidth: this.autoWidth,
      //     bookType: this.bookType
      //   })
      // })
      const tHeader = ['ID', '姓名'];
      const filterVal = ['id', 'name'];
      const list = [{ "id": "0001", "name": "张三" }, { "id": "0002", "name": "李四" }]
      const data = this.formatJson(filterVal, list)
      export_json_to_excel({
        header: tHeader,
        data,
        filename: "test",
        autoWidth: true,
        bookType: "xlsx"
      });

    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
  },
}
</script>

<style>
</style>